<%@ page import="com.tx.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<jsp:include page="head.jsp"/>
<%--中间内容开始--%>
<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class=" content detail">
            <div class="fly-panel detail-box">
                <h1>${bContent.bTitle}</h1>
                <div class="fly-detail-info">
                    <div class="fly-admin-box" data-id="123">
                    </div>
                </div>
                <div class="detail-about">
                    <div class="fly-detail-user">
                        <span >发布人：${bContent.user.uNickName}</span>
                        <span style="padding-left: 80px;">发布时间：<spring:eval expression="bContent.bCreateTime"/></span>
                        <span style="padding-left: 80px;">类别：${bContent.type.tName}</span>

                        <c:if test="${sessionScope.user.uId==bContent.uId}">
                            <span style="padding-left: 80px;">
                             <a class="layui-badge layui-bg-green" href="${pageContext.request.contextPath}/blog/student/to_update.do?bId=${bContent.bId}">编辑此贴</a>
                            </span>
                            <span>
                             <a class="layui-badge"  href="${pageContext.request.contextPath}/blog/student/removeold.do?bId=${bContent.bId}">删除此贴</a>
                            </span>
                        </c:if>
                    </div>
                </div>
                <div class="detail-body photos">
                    ${bContent.bContent}
                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>评论区</legend><a href="#" name="pingl"></a>
                </fieldset>
                <%--添加评论--%>
                <div class="layui-form layui-form-pane">
                    <form:form action="${pageContext.request.contextPath}/blog/addComment.do" method="post">
                        <div class="layui-form-item layui-form-text">
                            <a name="comment"></a>
                            <div class="layui-input-block">
                                <textarea id="L_content" name="cContent" required lay-verify="required" placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 150px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="cOtherId" value="${bContent.uId}"><%--传递博客作者id--%>
                            <input type="hidden" name="bId" value="${bContent.bId}"><%--传递博客id--%>
                            <button type="submit" class="layui-btn" lay-filter="*" lay-submit>发表评论</button>
                        </div>
                    </form:form>
                </div>
                <!-- 评论列表 -->
                <ul class="" id="jieda">
                    <c:forEach items="${comment}" var="cm">
                        <li data-id="111" class="">
                            <a name="item-1111111111"></a>
                            <div class="detail-about detail-about-reply">
                                <a class="fly-avatar" href=""><img src="${pageContext.request.contextPath}${cm.user.uImage}"></a>
                                <div class="fly-detail-user">
                                    <a href="" class="fly-link">
                                        <span>${cm.user.uNickName}</span>
                                        <a class="layui-badge">${cm.user.uType}</a>
                                    </a>
                                </div>
                                <div class="detail-hits">
                                    <span><spring:eval expression="cm.cCreateTime"/></span>
                                </div>
                            </div>
                            <div class="detail-body jieda-body photos">
                                <p>${cm.cContent}</p>
                            </div>
                            <div class="jieda-reply">
                                <span type="reply" class="jieda-reply aa">
                                    <p>
                                        <a href="javascript:;" style="text-decoration: none;"><!--onclick="btnReplyClick(this)"-->
                                            <i class="iconfont icon-svgmoban53"></i>
                                            <span id="rep" class="rep">回复</span>
                                        </a>
                                    </p>
                                </span>
                                <div class="jieda-admin">
                                   <%-- <span type="edit">编辑</span>
                                    <span type="del">删除</span>--%>
                                </div>
                            </div>
                            <%--回复表单默认隐藏--%>
                            <div class="jieda-reply layui-hide bb" style="margin-left: 61px;">
                                <form:form class="layui-form" action="" method="post">
                                <%--<form:form action="${pageContext.request.contextPath}/blog/addReply.do" method="post" class="layui-form">--%>
                                    <input name="rBId" id="rBId" value="${bContent.bId}" hidden="hidden"/>
                                    <input name="rOtherId" id="rOtherId" value="${cm.user.uId}" hidden="hidden"/>
                                    <input name="rCId" id="rCId" value="${cm.cId}" hidden="hidden"/>
                                    <div class="layui-form-item">
                                        <textarea name="rContent" id="rContent" lay-verify="required" placeholder="回复@${cm.user.uNickName}:" class="layui-textarea" style="min-height:80px;"></textarea>
                                    </div>
                                    <div class="layui-form-item">
                                        <button class="layui-btn"  lay-filter="addForm" lay-submit>提交</button>
                                    </div>
                                </form:form>
                            </div>
                            <div style="margin-left: 40px;">
                                <!-- 子评论开始 -->
                                    <ul class="layui-timeline">
                                        <c:forEach items="${reply}" var="reply">
                                            <c:if test="${cm.cId==reply.rCId}">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <div class="fly-detail-user layui-timeline-title">
                                                            <a href="" class="fly-link">
                                                                <span>${reply.ruName}</span>
                                                            </a>
                                                            <i style="color: #000000;" >回复</i>
                                                            <a href="" class="fly-link">
                                                                <span>${reply.rOtherName}</span>
                                                            </a>
                                                            <span><spring:eval expression="reply.rCreateTime"/></span>
                                                            <div class="detail-body jieda-body">
                                                                <p>${reply.rContent}</p>
                                                            </div>

                                                        </div>
                                                        <div class="jieda-reply">

                                                            <div class="dd">
                                                                    <i class="iconfont icon-svgmoban53"></i>
                                                                    <span class="re">回复</span>
                                                            </div>
                                                            <%--<span type="reply" class="jieda-reply dd">
                                                                <p>
                                                                    <a href="javascript:;" style="text-decoration: none;">
                                                                        <i class="iconfont icon-svgmoban53"></i>
                                                                        <span  class="re">回复</span>
                                                                    </a>
                                                                </p>
                                                            </span>--%>
                                                            <div class="jieda-admin">
                                                                <span type="edit">编辑</span>
                                                                <span type="del">删除</span>
                                                            </div>
                                                        </div>
                                                        <%--回复表单默认隐藏--%>
                                                        <div class="jieda-reply layui-hide cc" style="margin-left: 40px;padding-top: 5px;">
                                                            <form:form class="layui-form" action="" method="post">
                                                           <%-- <form:form action="${pageContext.request.contextPath}/blog/addReply.do" method="post" class="layui-form">--%>
                                                                <input name="rBId"  value="${bContent.bId}" hidden="hidden"/>
                                                                <input name="rOtherId"  value="${reply.ruId}" hidden="hidden"/>
                                                                <input name="rCId" value="${cm.cId}" hidden="hidden"/>
                                                                <div class="layui-form-item">
                                                                    <textarea name="rContent"  lay-verify="required" placeholder="回复@${reply.ruName}:" class="layui-textarea" style="min-height:80px;"></textarea>
                                                                </div>
                                                                <div class="layui-form-item">
                                                                    <%--<button  class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">提交</button>--%>
                                                                        <button class="layui-btn"  lay-filter="addForm" lay-submit>提交</button>
                                                                </div>
                                                            </form:form>
                                                        </div>
                                                    </div>

                                                </li>
                                            </c:if>
                                        </c:forEach>
                                    </ul>
                                <!-- 子评论结束 -->
                            </div>
                        </li>
                    </c:forEach>


                </ul>

            </div>
        </div>
    </div>
</div>
<%--中间内容结束--%>
<jsp:include page="bottom.jsp"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
<script type="text/javascript">

    $(".aa").on('click',function(){
        //console.log($(this).siblings('.bb'));
        //alert();

        if ($(this).find("span[class^='rep']").text() == '回复') {
            $(this).parent('div').siblings('.bb').removeClass('layui-hide');
            $(this).parent('div').siblings('.bb').addClass('layui-show');
            $(this).find("span[class^='rep']").text('收起');
        }else{
            $(this).parent('div').siblings('.bb').removeClass('layui-show');
            $(this).parent('div').siblings('.bb').addClass('layui-hide');
            $(this).find("span[class^='rep']").text('回复');
        }


    });

    $(".dd").on('click',function(){
        //alert($(this).find("span[class^='re']").text());
        if ($(this).find("span[class^='re']").text() == '回复') {
            $(this).parent('div').siblings('.cc').removeClass('layui-hide');
            $(this).parent('div').siblings('.cc').addClass('layui-show');
            $(this).find("span[class^='re']").text('收起');
        }else{
            $(this).parent('div').siblings('.cc').removeClass('layui-show');
            $(this).parent('div').siblings('.cc').addClass('layui-hide');
            $(this).find("span[class^='re']").text('回复');
        }


    })
</script>
<%--提交表单--%>
<script>
    layui.use(['layer','form'],function(){
        var form=layui.form;
        var layer=layui.layer;
        form.on('submit(addForm)', function(data){
            $.ajax({
                url:'${pageContext.request.contextPath}/blog/addReply.do',
                method:'post',
                async: false,
                data:data.field,
                dataType:'JSON',
                success:function(res){
                    console.log(res);
                    switch(res.code){
                        case 200:
                            layer.msg(res.msg, {icon: 1});
                            window.location.reload();
                            break;
                        case -1:
                            layer.msg(res.msg, {icon: 2});
                            window.location.reload();
                            break;
                    }
                },
                error:function (data) {

                }
            }) ;

        });
    });
</script>